
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
<!--    <meta name="Keywords" content="小额投资理财产品,理财产品排行,最新理财产品,投资理财产品,个人投资理财项目,个人理财,p2p理财,网上理财">-->
<!--    <meta name="description" content="“投呗”推出各种投资理财产品、投资项目，低门槛高收益，平均年收益率8.4%~13.8%。个人理财、P2P理财就选投呗！"/>-->
    <meta name="format-detection" content="telephone=no, email=no" />
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/invest.css">
    <!--<link rel="stylesheet" href="../lib/css/pullToRefresh.css">-->
    <link rel="stylesheet" href="../lib/css/dropload.css">
    <title>充电运营</title>
    <script type="text/javascript" src="../lib/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="../js/wapframwork.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        /* 新增父容器样式 */
        .title-wrapper {
            position: relative; /* 父容器相对定位，让按钮绝对定位 */
        }

        /* 隐藏按钮！！！刷新数据按钮！！！独立样式 */
        .hidden-refresh-btn {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            border: none;
            background: transparent;
            z-index: 999;
        }
        /* 顶部标题 */
        .page-title {
            text-align: center;
            font-size: 18px;
            padding: 16px;
            background-color: #fff;
            border-bottom: 1px solid #eee;
        }

        /* 汽车统计卡片 */
        .car-stats-card {
            background: linear-gradient(to right, #28a745, #2ecc71);
            color: #fff;
            border-radius: 12px;
            margin: 16px;
            padding: 16px;
        }

        .stats-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 12px;
        }

        .stats-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .stats-item {
            width: 32%;
            text-align: center;
            margin-bottom: 12px;
        }

        .stats-item span {
            display: block;
            font-size: 14px;
            margin-top: 4px;
        }

        .stats-number {
            font-size: 16px;
            font-weight: bold;
            color: #fff936;
        }

        /* 充电统计 */
        .charging-stats {
            background-color: #fff;
            margin: 0 16px 16px;
            border-radius: 12px;
            padding: 16px;
        }

        .stats-filter {
            display: flex;
            justify-content: space-around;
            margin-bottom: 12px;
        }

        .stats-filter a {
            text-decoration: none;
            color: #333;
            padding: 6px 12px;
            border-radius: 8px;
        }

        .stats-filter a.active {
            background-color: #28a745;
            color: #fff;
        }

        .stats-chart {
            width: 100%;
            height: 200px;
            background-color: #f9f9f9;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #999;
        }

        /* 运营中心 */
        .operation-center {
            background-color: #fff;
            margin: 0 16px 16px;
            border-radius: 12px;
            padding: 16px;
        }
        .operation-center1 {
            margin: 0 16px 60px;
            border-radius: 12px;
            padding: 66px;
        }


        .operation-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 12px;
        }

        .operation-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .operation-item {
            width: 23%;
            text-align: center;
            margin-bottom: 12px;
        }

        .operation-item img {
            width: 40px;
            height: 40px;
            margin-bottom: 4px;
            border-radius: 8px;
        }

        .operation-item span {
            display: block;
            font-size: 14px;
        }

        /* 底部导航 */
        .footer-nav {
            background-color: #fff;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
        }

        .footer-nav-item {
            text-align: center;
        }

        .footer-nav-item img {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
        }

        .footer-nav-item span {
            display: block;
            font-size: 12px;
        }

        .active {
            color: #28a745;
        }
    </style>

</head>
<body>
<!--<div class="page-title">汽车</div>-->
<!--<button class="hidden-refresh-btn" id="hiddenRefreshBtn"></button>-->
<!-- 直接用button标签，文字“汽车”就是按钮本身 -->
<!-- 用div模拟按钮，点击“汽车”触发事件 -->
    <div class="title-wrapper">
        <div class="page-title">汽车</div>
        <!-- 隐藏按钮 -->
        <button class="hidden-refresh-btn" id="hiddenShebeiBtn"></button>
    </div>
    <!-- 汽车统计卡片 -->
    <div class="car-stats-card">
        <div class="stats-title">汽车统计</div>
        <div class="stats-row">
            <div class="stats-item">
                <span class="stats-number" id="carzongshouyi"></span>
                <span>总收益(元)</span>
            </div>
            <div class="stats-item">
                <span class="stats-number" id="carjinrichongdian"></span>
                <span>今日充电(元)</span>
            </div>
            <div class="stats-item">
                <span class="stats-number" id="carjinriyondian"></span>
                <span>今日用电(度)</span>
            </div>
            <div class="stats-item">
                <span class="stats-number" id="carjinridianfei"></span>
                <span>今日电费</span>
            </div>
            <div class="stats-item">
                <span class="stats-number" id="carjinrifuwufei"></span>
                <span>今日服务费</span>
            </div>
            <div class="stats-item">
                <span class="stats-number" id="carjinridingdan"></span>
                <span>今日充电人数</span>
            </div>
            <div class="stats-item">
                <span class="stats-number" id="shebeishu"></span>
                <span>设备数量</span>
            </div>
            <div class="stats-item">
                <span class="stats-number" id="zaixianshu"></span>
                <span>在线数量</span>
            </div>
            <div class="stats-item">
                <span class="stats-number" id="lixianshu"></span>
                <span>离线数量</span>
            </div>
        </div>
    </div>
    <!-- 充电统计 -->
<!--    <div class="charging-stats">-->
<!--        <div class="operation-title">充电统计</div>-->
<!--        <div class="stats-filter">-->
<!--            <a href="javascript:;" class="active">30天</a>-->
<!--            <a href="javascript:;">周</a>-->
<!--            <a href="javascript:;">月</a>-->
<!--            <a href="javascript:;">年</a>-->
<!--            <a href="javascript:;"><img src="../img/date.png" width="20" height="20"></a>-->
<!--        </div>-->
<!--        <div class="stats-chart">-->
<!--            <span>图表区域</span>-->
<!--        </div>-->
<!--    </div>-->
    <!-- 运营中心 -->
    <div class="operation-center">
        <div class="operation-title">运营中心</div>
        <div class="operation-list">
            <div class="operation-item" id="manualInvoiceItem1">
                <img src="../img/chongdian.png">
                <span>电站管理</span>
            </div>
            <div class="operation-item" id="manualInvoiceItem2">
                <img src="../img/shebei.png">
                <span>设备管理</span>
            </div>
            <div class="operation-item" id="manualInvoiceItem3">
                <img src="../img/feiyong.png">
                <span>计费策略</span>
            </div>
            <div class="operation-item" id="manualInvoiceItem4">
                <img src="../img/luru.png">
                <span>设备录入</span>
            </div>
        </div>
    </div>
    <!-- 运营中心 -->
    <div class="operation-center">
        <div class="operation-title">运营中心</div>
        <div class="operation-list">
            <div class="operation-item" onclick="window.location.href='chongdianjilu.html'">
                <img src="../img/chongdianjilu.png">
                <span>充电记录</span>
            </div>
            <div class="operation-item" id="manualInvoiceItem5">
                <img src="../img/shoujihao.png">
                <span>查手机号</span>
            </div>
            <div class="operation-item" id="manualInvoiceItem6">
                <img src="../img/shouru.png">
                <span>盈收汇总</span>
            </div>
            <div class="operation-item" id="manualInvoiceItem7">
                <img src="../img/zhanweichaxun.png">
                <span>占位查询</span>
            </div>
        </div>
    </div>
    <div class="operation-center1">    </div>
    <!-- 底部 -->
    <section id="sp_footer">
        <ul class="footer">
            <li class="footer-item">
                <a href="index.html" class="">
                    <i class="icon icon_home icon_index"></i>
                    <p class="icon_title">首页</p>
                </a>
            </li>
            <li class="footer-item">
                <a href="#" class="">
                    <i class="icon icon_invest_active"></i>
                    <p class="icon_title" style="color: #368a28">汽车</p>
                </a>
            </li>
            <li class="footer-item">
                <a href="activity.html" class="">
                    <i class="icon icon_activity"></i>
                    <p class="icon_title">单车</p>
                </a>
            </li>
            <li class="footer-item">
                <a href="personal.html" class="">
                    <i class="icon icon_my"></i>
                    <p class="icon_title">我的</p>
                </a>
            </li>
        </ul>
    </section>

</body>
<!-- 1. 先引 layer 的 CSS 和 JS -->
<link rel="stylesheet" href="../lib/css/layer.css">
<script src="../lib/js/layer.js"></script>
<script src="../js/dataManager.js"></script>
<script src="../js/manualInvoiceTip.js"></script>
<!--<script src="../js/test.js"></script>-->
<script>
    window.onload = () => {
        // 渲染函数：从共享数据更新 DOM
        const render = (data) => {
            // console.log('汽车页数据：', data);
            document.getElementById('carzongshouyi').textContent = `¥${data.withdrawableAmount.toFixed(2)}`;
            document.getElementById('carjinrichongdian').textContent = `¥${data.dailyCharge.toFixed(2)}`;
            document.getElementById('carjinriyondian').textContent = data.dailyElectricity.toFixed(2);
            document.getElementById('carjinridianfei').textContent = data.dailyElectricityFee.toFixed(2);
            document.getElementById('carjinrifuwufei').textContent = data.dailyServiceFee.toFixed(2);
            document.getElementById('carjinridingdan').textContent = data.chargeUsers;
            document.getElementById('shebeishu').textContent = data.deviceCount;
            document.getElementById('zaixianshu').textContent = data.onlineCount;
            document.getElementById('lixianshu').textContent = '0'; // 字符串形式，效果相同
        };


        setupManualInvoiceTip('manualInvoiceItem1');
        setupManualInvoiceTip('manualInvoiceItem2');
        setupManualInvoiceTip('manualInvoiceItem3');
        setupManualInvoiceTip('manualInvoiceItem4');
        setupManualInvoiceTip('manualInvoiceItem5');
        setupManualInvoiceTip('manualInvoiceItem6');
        setupManualInvoiceTip('manualInvoiceItem7');

        // 1. 初始化渲染（用持久化数据）
        render(window.dataManager.getSharedData());

        // 2. 监听数据变化：定时更新或跨页修改时自动刷新
        window.dataManager.onDataUpdate(render);


        // 新增的隐藏按钮逻辑
        const btn = document.getElementById('hiddenShebeiBtn');
        btn.addEventListener('click', () => {
            window.dataManager.handleDataByDeviceCount(); // 刷新数据
        });



    };
</script>

<script type="text/javascript" src="../lib/js/circleProgress.js"></script>
<!--<script type="text/javascript" src="../lib/js/iscroll.js"></script>-->
<!--<script type="text/javascript" src="../lib/js/pullToRefresh.js"></script>-->
<script type="text/javascript" src="../lib/js/dropload.js"></script>
<script type="text/javascript" src="../js/invest.js"></script>
</html>